<!--
 * @author: sanbao
 * @Date: 2022-09-05 15:52:40
-->
<style lang='scss' scoped>
#echarts2 {
  width: 100%;
  height: 100%;
}
</style>

<template>
  <div id="echarts2"></div>
</template>

<script>
import { ref, reactive, toRefs, computed, onMounted } from "vue";
import { a } from "../api/index";
export default {
  components: {},
  setup() {
    onMounted(() => {
      getdocument();
    });
    const getdocument = async () => {
      let myChart = echarts.init(document.getElementById("echarts2"));
      var data = [];
      var titlename = [];
      var valdata = [683, 234, 234, 523, 345];
      var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
      const response = await a;
      response.foreignList.splice(0, 5).forEach((v) => {
        titlename.push(v.name);
        data.push(parseInt((v.heal / v.confirm) * 100));
      });
      myChart.setOption({
        xAxis: {
          show: false,
        },
        grid: {
          right: "3%",
          left: "12%",
          bottom: "5%",
          top: "5%",
        },
        yAxis: [
          {
            show: true,
            data: titlename,
            inverse: true,
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#fff",
              rich: {
                lg: {
                  backgroundColor: "#339911",
                  color: "#fff",
                  borderRadius: 15,
                  align: "center",
                  width: 15,
                  height: 10,
                },
              },
            },
          },
          {
            show: false,
            inverse: true,
            data: valdata,
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: "#fff",
              },
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "条",
            type: "bar",
            yAxisIndex: 0,
            data: data,
            barWidth: 12,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: function (params) {
                  var num = myColor.length;
                  return myColor[params.dataIndex % num];
                },
              },
            },
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{c}%",
              },
            },
          },
          {
            name: "框",
            type: "bar",
            yAxisIndex: 1,
            barGap: "-100%",
            data: [100, 100, 100, 100, 100],
            barWidth: 15,
            itemStyle: {
              normal: {
                color: "none",
                borderColor: "#00c1de",
                borderWidth: 3,
                barBorderRadius: 15,
              },
            },
          },
        ],
      });
      window.onresize = function () {
        myChart.resize();
      };
    };
    return {};
  },
};
</script>








